<template>
  <div>
    <div style="margin-bottom:10px;display:flex;align-items: center;">
		<j-select-xiaoqu placeholder="请选择校区" v-model="queryParam.campusId" @input="campusSelect"></j-select-xiaoqu>
		 <a-button type="primary" style="margin-left:10px;" @click="addDaySchedule">添加</a-button>
	</div>
	
    <a-table :columns="dayScheduleColumns" :data-source="dayScheduleData" row-key="key">
     <span slot="action" slot-scope="text, record">
     	<span
     		style="color: #028BE2; cursor:pointer; margin-right: 20px;"
     		@click="editDaySchedule(record)">编辑</span>
     	<span style="color: #028BE2; cursor:pointer; margin-right: 20px;"	@click="deleteDaySchedule(record.key)">删除
     	</span>	
     </span>
    </a-table>
   
  </div>
</template>

<script>
	import { Select, Table, Input, Button, Modal } from 'ant-design-vue';
	// import { EduListMixin } from '@/mixins/KwglMixin'
	import { EduUtils } from '@/mixins/EduUtils'
	import JSelectXiaoqu from '@/components/kwglbiz/JSelectXiaoqu'
export default {
	 mixins: [EduUtils],
	components: {
		'a-modal': Modal,
	  JSelectXiaoqu,
	},
  data() {
    return {
		queryParam:{},
      dayScheduleColumns: [
        {
          title: '时间段',
          dataIndex: 'timePeriod',
          key: 'timePeriod'
        },
        {
          title: '节次',
          dataIndex: 'section',
          key: 'section'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 220,
		  scopedSlots: {
		  	customRender: 'action'
		  }
        }
      ],
      dayScheduleData: [
        {
          key: '1',
          timePeriod: '8:00 - 8:45',
          section: '第1节',
          isEditing: false
        },
        {
          key: '2',
          timePeriod: '8:50 - 9:35',
          section: '第2节',
          isEditing: false
        }
      ]
    };
  },
  methods: {
    editDaySchedule(record) {
       let tempTimePeriod = record.timePeriod;
            let tempSection = record.section;
            Modal.confirm({
              title: '确认编辑',
              content: (
                <div>
                  <div>
                    <span>时间段: </span>
                    <a-input
                      v-model={tempTimePeriod}
                    />
                  </div>
                  <div>
                    <span>节次: </span>
                    <a-input
                      v-model={tempSection}
                    />
                  </div>
                </div>
              ),
              onOk: () => {
                record.timePeriod = tempTimePeriod;
                record.section = tempSection;
                console.log('编辑操作触发，记录：', record);
                record.isEditing = false;
              },
              onCancel: () => {
                console.log('取消编辑操作');
              }
            });
    },
    deleteDaySchedule(key) {
      console.log('删除操作触发，key：', key);
      this.dayScheduleData = this.dayScheduleData.filter(item => item.key !== key);
    },
    addDaySchedule() {
      const newKey = String(Number(this.dayScheduleData[this.dayScheduleData.length - 1].key) + 1);
      const newItem = {
        key: newKey,
        timePeriod: '8:50 - 9:35',
        section: `第${this.dayScheduleData.length + 1}节`,
        isEditing: true
      };
      this.dayScheduleData.push(newItem);
      this.dayScheduleData = [...this.dayScheduleData];
    }
  }
};
</script>